<script setup>
import Cesium from './cesiumObj/CesiumModule';
import { onMounted, ref, reactive } from 'vue';
import MeasureTools from './cesiumObj/MeasureTools.vue';
import { viewerObj, clickEntity, initViewer } from './cesiumObj/CesiumModule';
import { toolClick, imgValues } from './cesiumObj/Measure';
import { entityName, popSty, popHandle } from './cesiumObj/Pop';

onMounted(() => {
  // const viewer = new Cesium.Viewer('cesiumContainer', viewerObj.options);
  viewerObj.viewer = initViewer('cesiumContainer')
  // viewer赋值给全局变量，方便其他方法调用
  // viewerObj.viewer = viewer;
  viewerObj.viewer._cesiumWidget._creditContainer.style.display = "none";
  viewerObj.viewer.scene.camera.flyTo({
    //镜头的经纬度、高度。镜头默认情况下，在指定经纬高度俯视（pitch=-90）地球
    destination: Cesium.Cartesian3.fromDegrees(
      118.351795,
      36.213577,
      10000000
    ),
    duration: 1.5, //动画持续时间
    complete: function () {
    },
  });
  // 初始化实体
  initEntity();
  // 点击实体弹窗的事件
  viewerObj.viewer.screenSpaceEventHandler.setInputAction((movement) => {
    popHandle(movement)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})
const position = new Cesium.CallbackProperty(() => {
  // 随着时间变化，实体的位置也会变化
  return Cesium.Cartesian3.fromDegrees(
    118.351795 + (Math.random() - 0.5) / 1,
    36.213577 + (Math.random() - 0.5) / 1,
    10000000
  );
}, false);
let eee = null
const initEntity = () => {
  // 使用callbackproperty动态更新实体的位置

  const entity = viewerObj.viewer.entities.add({
    name: 'Red box with black outline',
    // position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    position,
    box: {
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    },
  });
  eee = entity
  // 在青岛市中心添加一个实体
  const entity2 = viewerObj.viewer.entities.add({
    name: '青岛市中心',
    position: Cesium.Cartesian3.fromDegrees(120.38264, 36.06708),
    box: {
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    },
  });
  clickEntity.push(entity.id, entity2.id);
}
let aaa = 0
const toolClick1 = (toolName) => {
  if (toolName == 2) {
    if (aaa == 0) {
      eee.position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
      aaa = 1
    } else {
      eee.position = position
      aaa = 0
    }
  }
}
</script>
<template>
  <div id="cesiumContainer"></div>
  <Transition>
    <div :style="popSty" v-if="popSty.display == 'block'">{{ entityName }}</div>
  </Transition>
  <MeasureTools @toolClick="toolClick" />
</template>

<style scoped lang="less">
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.measureTools {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
}
</style>